v:<!--
 * @Author: wei_jt@ecidi.com
 * @Date: 2019-07-22 11:04:00
 * @LastEditors: zhong_m
 * @LastEditTime: 2022-01-05 10:23:39
 * @Description: 应用详情
 -->
<template>
  <fks-dialog
    :append-to-body="true"
    :visible.sync="show"
    width="960px"
    @close="close"
  >
    <div slot="title">{{ LANG.MESSAGE_DETAIL }}</div>
    <fks-form ref="form" :model="form" label-width="100px">
      <fks-form-item :span="24" :label="LANG.MESSAGE_TITLE">
        {{ form.msgTitle }}
      </fks-form-item>
      <fks-form-item :span="12" :label="LANG.MESSAGE_TYPE">
        {{ form.msgType }}
      </fks-form-item>
      <fks-form-item :span="12" :label="LANG.SENDER">
        {{ form.fromUserName }}
      </fks-form-item>
      <fks-form-item :span="12" :label="LANG.SENDING_TIME">
        {{ form.sendTime }}
      </fks-form-item>
      <fks-form-item :span="12" :label="LANG.SEND_STATUS">
        {{ form.status }}
      </fks-form-item>
      <fks-form-item :span="24" :label="LANG.MESSAGE_CONTENT">
        <div class="msg-content">
          <span>
            {{ form.msgBody }}
          </span>
        </div>
      </fks-form-item>
      <fks-query-page
        v-loading="loading"
        :data="tableData"
        :total="total"
        :page-size.sync="pageSize"
        class="msgTable"
        :current-page.sync="currentPage"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[20, 50, 100]"
        :element-loading-text="LANG.LOADING"
        :table-name="LANG.SEND_DETAIL"
        @query="getMsgDetailData"
      >
        <template slot="singleSearch">
          <div class="single-searchBox">
            <fks-select
              v-model="searchParams.status"
              :placeholder="LANG.PLEASE_SELECT"
              @change="getMsgDetailData"
              clearable
            >
              <fks-option
                v-for="item in msgSendStatus"
                :key="item.value"
                :label="item[$lang]"
                :value="item.code"
              />
            </fks-select>
            <fks-input
              style="margin-left: 8px"
              v-model="searchParams.username"
              maxlength="50"
              :placeholder="LANG.INPUT_NAME"
              class="single-searchBox-item"
              clearable
              @clear="clearSearch"
              @keyup.enter.native="getMsgDetailData"
            >
              <fks-button
                slot="append"
                icon="fks-icon-search"
                @click="getMsgDetailData"
              />
            </fks-input>
          </div>
        </template>
        <fks-table-column type="index" align="center" label="#">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </fks-table-column>
        <fks-table-column
          prop="getAccountNumber"
          :label="LANG.RECEIVING_ACCOUNT"
          width="120" />
        <fks-table-column
          v-if="msgType != '1' && msgType != '2'"
          prop="userFullname"
          :label="LANG.RECIPIENT"
          width="120" />
        <fks-table-column
          prop="getTime"
          :label="LANG.RECEIVING_TIME"
          width="160" />
        <fks-table-column
          prop="status"
          :label="LANG.RECEIVING_STATUS"
          width="100"
        >
          <div slot-scope="scope">
            <fks-tag v-if="scope.row.status === 0">
              {{ LANG.SENDING }}
            </fks-tag>
            <fks-tag v-if="scope.row.status === 1" type="success">
              {{ LANG.SENDING_SUCCEEDED }}
            </fks-tag>
            <fks-tag v-if="scope.row.status === 2">
              {{ LANG.SENDING_FAILED }}
            </fks-tag>
            <fks-tag v-if="scope.row.status === 3">
              {{ LANG.PARTIAL_FAILURE }}
            </fks-tag>
          </div>
        </fks-table-column>
        <fks-table-column
          prop="errorLog"
          :label="LANG.ERROR_MESSAGE"
          min-width="60"
      /></fks-query-page>
    </fks-form>
  </fks-dialog>
</template>
<script>
import Editor from "@/components/Editor";
import { getMsgDetail } from "../api";
export default {
  name: "MessageDetail",
  components: {
    Editor,
  },
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
    msgType: {
      type: String,
      default: "",
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      form: {},
      show: this.visible,
      tableData: [],
      total: 0,
      pageSize: 20,
      currentPage: 1,
      searchParams: {
        status: "",
        username: "",
      },
      searchValue: "",
      loading: false,
    };
  },
  computed: {
    msgSendStatus() {
      return this.$store.state.enum.msgSendStatus.filter((item) => {
        return item.code != 3;
      });
    },
    msgTypes() {
      return this.$store.state.enum.msgSendType;
    },
  },
  watch: {
    data: {
      immediate: true,
      handler: function (val) {
        this.form = Object.assign({}, val);
        let statusList = this.msgSendStatus.filter((item) => {
          return item.code == this.form.status;
        });
        if (statusList.length > 0) {
          this.form.status = statusList[0][this.$lang];
        }
        let msgTypeList = this.msgTypes.filter((item) => {
          return item.code == this.msgType;
        });
        if (msgTypeList.length > 0) {
          this.form.msgType = msgTypeList[0][this.$lang];
        }
      },
    },
    visible() {
      this.show = this.visible;
    },
    show() {
      this.$emit("update:visible", this.show);
    },
  },
  mounted() {
    this.getMsgDetailData();
  },
  methods: {
    clearSearch() {
      this.searchParams.username = "";
      this.getMsgDetailData();
    },
    //关闭表单弹窗
    close() {
      this.show = false;
      this.form = {};
      this.$emit("update:data", {});
      this.$emit("close");
    },
    getMsgDetailData() {
      this.loading = true;
      getMsgDetail({
        msgId: this.form.id,
        status: this.searchParams.status,
        seachValue: this.searchParams.username,
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      })
        .then((res) => {
          this.loading = false;
          if (res.status && res.data) {
            this.tableData = res.data.list;
            this.total = res.data.total;
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/variables.scss";
::v-deep .fks-table__row {
  td:last-child {
    div {
      height: 36px;
      overflow: scroll;
      max-height: 49px;
      line-height: initial;
    }
  }
}

::v-deep .fks-dialog__body {
  padding-bottom: 0;
}

.tips-container {
  font-size: 14px;
  line-height: 20px;
}
.msg-content {
  height: 120px;
  overflow-y: auto;
  background-color: mix(#ffffff, $theme, 95%) !important;
  padding-left: 12px;
  color: #191919;
  font-size: 14px;
  border-radius: 8px;
}
.msgTable {
  padding-top: 0px;
  padding-right: 8px;
  ::v-deep .single-searchBox-item {
    margin-right: 0px;
  }
}
::v-deep .fks-table {
  min-height: 320px !important;
}
</style>
